<template>
    <view
        :class="['uni-row', typeClass, justifyClass, alignClass]"
        :style="{
            marginLeft: `${Number(marginValue)}rpx`,
            marginRight: `${Number(marginValue)}rpx`
        }"
    >
        <slot></slot>
    </view>
</template>

<script>
const ComponentClass = "uni-row";
const modifierSeparator = "--";
/**
 * Row	布局-行
 * @description	流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
 * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
 *
 * @property	{gutter} type = Number 栅格间隔
 * @property	{justify} type = String flex 布局下的水平排列方式
 * 						可选	start/end/center/space-around/space-between	start
 * 						默认值	start
 * @property	{align} type = String flex 布局下的垂直排列方式
 * 						可选	top/middle/bottom
 * 						默认值	top
 * @property	{width} type = String|Number nvue下需要自行配置宽度用于计算
 * 						默认值 750
 */

export default {
    name: "UniRow",
    componentName: "uniRow",
    // #ifdef MP-WEIXIN
    options: {
        virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
    },
    // #endif
    props: {
        type: String,
        gutter: Number,
        justify: {
            type: String,
            default: "start"
        },
        align: {
            type: String,
            default: "top"
        },
        // nvue如果使用span等属性，需要配置宽度
        width: {
            type: [String, Number],
            default: 750
        }
    },
    computed: {
        marginValue() {
            // #ifndef APP-NVUE
            if (this.gutter) {
                return -(this.gutter / 2);
            }
            // #endif
            return 0;
        },
        typeClass() {
            return this.type === "flex" ? `${ComponentClass + modifierSeparator}flex` : "";
        },
        justifyClass() {
            return this.justify !== "start" ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}` : "";
        },
        alignClass() {
            return this.align !== "top" ? `${ComponentClass + modifierSeparator}flex-align-${this.align}` : "";
        }
    },
    created() {
        // #ifdef APP-NVUE
        this.type = "flex";
        // #endif
    }
};
</script>

<style lang="scss">
$layout-namespace: ".uni-";
$row: $layout-namespace + "row";
$modifier-separator: "--";

@mixin utils-clearfix {
    $selector: &;

    @at-root {
        /* #ifndef APP-NVUE */
        #{$selector}::before,
        #{$selector}::after {
            display: table;
            content: "";
        }

        #{$selector}::after {
            clear: both;
        }

        /* #endif */
    }
}

@mixin utils-flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: $direction;
}

@mixin set-flex($state) {
    @at-root &-#{$state} {
        @content;
    }
}

#{$row} {
    position: relative;
    flex-direction: row;

    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */

    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */

    // 非nvue使用float布局
    @include utils-clearfix;

    // 在QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float
    @at-root {
        /* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
        &#{$modifier-separator}flex {
            @include utils-flex;
            flex-wrap: wrap;
            flex: 1;

            &:before,
            &:after {
                /* #ifndef APP-NVUE */
                display: none;
                /* #endif */
            }

            @include set-flex(justify-center) {
                justify-content: center;
            }

            @include set-flex(justify-end) {
                justify-content: flex-end;
            }

            @include set-flex(justify-space-between) {
                justify-content: space-between;
            }

            @include set-flex(justify-space-around) {
                justify-content: space-around;
            }

            @include set-flex(align-middle) {
                align-items: center;
            }

            @include set-flex(align-bottom) {
                align-items: flex-end;
            }
        }

        /* #endif */
    }
}

// 字节、QQ配置后不生效
// 此处用法无法使用scoped
/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
:host {
    display: block;
}

/* #endif */
</style>
